.cropper-modal-warpper {
	*{box-sizing: border-box;}
	button{text-transform: none;outline:none;-webkit-appearance: none;}
	button:not(:disabled):not(.disabled) {cursor: pointer;}
	a{text-decoration:none;}
	
	box-sizing: border-box;
	display: none;
	position: fixed;top: 0;right: 0;bottom: 0;left: 0;z-index: 1050;overflow: hidden;outline: 0;
	background-color: rgba(0,0,0,0.5);
	
	&.fade{
		opacity: 0;transition: opacity .15s linear;
		.modal-dialog{transition: transform .3s ease-out;transform: translate(0,-25%);}
	}
	&.show{
		opacity: 1;
		.modal-dialog{transform: translate(0,0);}
	}
	
	.modal-dialog{
		position: relative;width: auto;margin: .5rem;pointer-events: none;
		width: 1000px;margin: 1.75rem auto;
	}
	.modal-content{
		position: relative;display: flex;flex-direction: column;width: 100%;pointer-events: auto;
		background-color: #fff;background-clip: padding-box;
    border: 1px solid rgba(0,0,0,.2);border-radius: .3rem;outline: 0;
		box-shadow: 0 5px 15px rgba(0,0,0,0.5);
		
		.modal-header{
			display: flex;align-items: flex-start;justify-content: space-between;
			padding: 1rem;border-bottom: 1px solid #e9ecef;border-top-left-radius: .3rem;border-top-right-radius: .3rem;
			
			.modal-title {margin: 0;line-height: 1.5;}
			.close {
				padding: 1rem;margin: -1rem -1rem -1rem auto;
				background-color: transparent;border: 0;
				float: right;opacity: .5;
				font-size: 1.5rem;font-weight: 700;line-height: 1;color: #000;text-shadow: 0 1px 0 #fff;
				&:focus,&:hover {color: #000;text-decoration: none;opacity: .75;}
			}
		}
		.modal-body{
			position: relative;flex: 1 1 auto;padding: 1rem;
		}
		.modal-footer{
			display: flex;align-items: center;justify-content: flex-end;
			padding: 1rem;border-top: 1px solid #e9ecef;
			>:not(:last-child) {margin-right: .25rem;}
			>:not(:first-child) {margin-left: .25rem;}
		}
	}
	
	
	.image-warpper{
		display: flex; max-height: 400px; overflow-y: auto;
		.img-container{
			flex: 1;width:0; height: 400px; overflow: hidden;
			>img{max-width: 100%;}
		}
		.img-preview{
			flex:0;flex-basis:360px;padding-left: 15px;
			#cropper_preview{
				float: left; overflow: hidden; width: 345px;height: 160px;
			}
		}
	}
	
	.btn{
		padding: .375rem .75rem;
		padding-left: .75rem;padding-right: .75rem;
		display: inline-block;font-weight: 400;text-align: center;white-space: nowrap;vertical-align: middle;
    user-select: none;border: 1px solid transparent;font-size: 1rem;line-height: 1.5;border-radius: .25rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
		&.btn-secondary {
			color: #fff;background-color: #6c757d;border-color: #6c757d;
			&:hover{color: #fff;background-color: #5a6268;border-color: #545b62;}
			&:focus{outline: 0;box-shadow: 0 0 0 0.2rem rgba(108,117,125,.5);}
		}
		&.btn-primary {
			color: #fff;background-color: #007bff;border-color: #007bff;
			&:hover{color: #fff;background-color: #0069d9;border-color: #0062cc;}
			&:focus{outline: 0;box-shadow: 0 0 0 0.2rem rgba(0,123,255,.5);}
		}
	}
	
}